import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    ScrollView,
	ListView,
	FlatList
} from 'react-native';
import {Table, TableWrapper, Row, Rows, Col, Cols, Cell   } from 'react-native-table-component';

export default class Page3 extends Component {
	// constructor(props) {
	// 	super(props);
	// 	this.state = {
	// 		tableHead: ['', 'Head1', 'Head2', 'Head3',"Head4","Head5"],
	// 		widthArr: [40, 60, 80, 100, 120, 140, 160, 180, 200],
	// 		tableTitle: ['Title', 'Title2', 'Title3', 'Title4'],
	// 		tableData: [
	// 			['1', '2', '3','1', '2'],
	// 			['a', 'b', 'c','1', '2'],
	// 			['1', '2', '3','1', '2'],
	// 			['a', 'b', 'c','1', '2']
	// 		]
	// 	}
	// }
	// render() {
	// 	const state = this.state;
	//
	// 	return (
     //        <View style={styles.container}>
     //            <ScrollView horizontal={true}>
     //                <View>
     //                    <Table borderStyle={{borderColor: '#C1C0B9'}}>
     //                        <Row data={state.tableHead} widthArr={state.widthArr} style={styles.header} textStyle={styles.text}/>
     //                    </Table>
     //                    <ScrollView style={styles.dataWrapper}>
     //                        <TableWrapper style={styles.wrapper}>
     //                            <Col data={state.tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>
     //                            <Cols data={state.tableData} style={styles.head} textStyle={styles.text}/>
     //                        </TableWrapper>
     //                    </ScrollView>
     //                </View>
     //            </ScrollView>
     //        </View>
	// 	)
	// }

	// render() {
	// 	const state = this.state;
	// 	return (
     //        <View style={styles.container}>
     //            <Table>
     //                <Table borderStyle={{borderColor: '#C1C0B9'}}>
     //                    <Row data={state.tableHead} widthArr={state.widthArr}  style={styles.head} textStyle={styles.text}/>
     //                </Table>
     //                <ScrollView style={styles.dataWrapper}>
     //                    <TableWrapper style={styles.wrapper}>
     //                        <Col data={state.tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>
     //                        <Rows data={state.tableData} flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.text}/>
     //                    </TableWrapper>
     //                </ScrollView>
     //            </Table>
     //        </View>
	// 	)
	// }
	constructor() {
		super();
		this.state = {
			dataSource: [
			    "1","2","3"
            ]
		};
	}
	_renderItem2 = ({item})=>{
		return <View>
            <View style={styles.b}>
               <Text>{item.key}</Text>
            </View>
        </View>
    }
	_renderItem = ({item}) => {
		if(item.className === "nidie") {
            return <View style={[styles.a]}>
                <View style={{width:50,flexDirection:'column',backgroundColor:'red',flex:1}}>
                    <Text>有基友拉我裤链~</Text>
                </View>
                <FlatList
                    style={{marginLeft:50,position:"absolute",top:0}}
                    horizontal = {true}
                    data={[{key: 'abc',className:'nidie'},{key: '斯蒂芬斯蒂芬',className:'nidie'},{key: '水电费',className:'nidie'}]}
                    renderItem={this._renderItem2}
                />
            </View>
		}
	}


	render() {
		return (
		    <View>
                <FlatList
                    data={[{key: 'a',className:'nidie'}]}
                    renderItem={this._renderItem}
                />
            </View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
        height:300,
        marginBottom:20,
		backgroundColor:"#b90",
    },
	a: {
	    backgroundColor:"#f60",
		height:800,
    },
    b: {
	    width: 300,
	    backgroundColor:"#b90",
    }
});

// const styles = StyleSheet.create({
// 	container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
// 	head: {  height: 40,  backgroundColor: '#f1f8ff'  },
// 	wrapper: { flexDirection: 'row' },
// 	title: { flex: 1, backgroundColor: '#f6f8fa' },
// 	// row: {  height: 28  },
// 	text: { textAlign: 'center' }
// });